<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>动态创建节点元素</title>
  <script type="text/javascript">
	function createSelect(){
		//实现方式1：吧select、option等元素用字符串拼接，然后渲染到元素节点内即可；
		//实现方式2：创建节点，追加的方式来实现

		/**
		createElement: 创建元素节点
		createTextNode： 创建文本节点(字符串节点)

		removeChild： 删除节点,父类节点删除子类节点
		appendChild：在元素节点的子类最后面追加节点元素
		replaceChild(newNode,oldNode): 替换节点，在oldNode节点上替换成新节点
		insertBefore(newNode,oldNode)： 插入节点，在oldNode节点前插入新节点
		cloneNode() : 克隆节点

		childNodes: 获取所有的子类节点

		setAttribute: 设置属性值
		getAttribute：获取属性值
		removeAttribute： 移除属性值

		查找元素：
		document.getElementById():  通过id=xx查询元素
		document.getElementsByName() ： 通过name=xx查找元素
		document.getElementsByClassName()： 通过class=xx查找元素
		document.getElemetsByTagName();   通过标签名称（div,span,select等）查找元素
		
		*/
		
		//1、创建select元素节点
		var selectNode = document.createElement("select");
		for(var i=0;i<10;i++){
			var optionNode = document.createElement("option");
			var text = "湖北省"+i;
			optionNode.setAttribute("value",text);
			optionNode.appendChild(document.createTextNode(text));

			selectNode.appendChild(optionNode);
		}
		
		//找到span元素节点
		var spanNode = document.getElementById("show");
		spanNode.appendChild(selectNode);
	}
  </script>
 </head>
 <body>
	<button onclick="createSelect();">创建节点</button>
	<br/>
 	<select>
		<option value="湖北省">湖北省</option>
		<option value="湖北省">湖北省</option>
		<option value="湖北省">湖北省</option>
		<option value="湖北省">湖北省</option>
		<option value="广东省" selected="selected">广东省</option>
		<option value="湖北省">湖北省</option>
		<option value="湖北省">湖北省</option>
		<option value="湖北省">湖北省</option>
		<option value="湖北省">湖北省</option>
	</select>
	<br/>
	<span id="show"></span>
  
 </body>
</html>
